<script lang="ts">
import { onMounted, defineComponent, ref, reactive, toRefs, inject } from 'vue';
import { userService } from '../../../api/user';
//@ts-ignore
import {SearchOutlined} from '@ant-design/icons-vue';
import type { TreeSelectProps, SelectProps  } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
let userJSON=localStorage.getItem("user")
//@ts-ignore
let userobj=JSON.parse(userJSON)

//界面刷新
const reload = inject("reload");

//获取患者信息
const patientData = async() => {
  const response = await userService.getPatient(userobj.id)
  state.data = response.data
  console.log(state.data)
}
//获取患者影像
const patientImage = async() => {
  const response = await userService.getImage(state.patientId)
  state.imageData = response.data
  //@ts-ignore
  console.log(state.imageData)
  diagnoseForm.imageType = state.imageData[0].imageType
}

const state = reactive({
  data:[],
  patientId:0n,
  patientName:'',
  patientGender:'',
  patientAge:'',
  imageData:[], 
  //diagnoseSupport:'',
})

const diagnoseForm = reactive({
  doctorId:0n,
  userId:0n,
  diseaseName:'',
  checkIntro:'',
  imageType:'',
  imageInfo:'',
  diagnose:'',
})
const hazardForm = reactive({
  hazard:'', info:'', userId:0n, doctorId:0n
})
const infectForm = reactive({
  disease_name:'', user_id:0n, doctor_id:0n, classify:'',
  onset:null, diagnose_time:null, info:'',
})
//病例分类（传染病）
const caseClassify = ref<SelectProps['options']>([
  {value:'确诊病例', label:'确诊病例'},
  {value:'临床诊断病例', label:'临床诊断病例'},
  {value:'疑似病例', label:'疑似病例'},
]);

//查询相关
const search = reactive({
  searchText:'',searchColumn:'',
});
const searchInput = ref();
//@ts-ignore
const handleSearch = (selectedKeys, confirm, dataIndex) => {
      confirm();
      search.searchText = selectedKeys[0];
      search.searchColumn = dataIndex;
};
//@ts-ignore
const handleReset = clearFilters => {
      clearFilters({ confirm: true });
      search.searchText = '';
};
//表 每一列
const columns = [
  {
    title: '状态',
    dataIndex: 'tag',
    key: 'tag',
  },
  {
    title: '编号',
    dataIndex: 'userId',
    key: 'userId',
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    customFilterDropdown: true,
    //@ts-ignore
    onFilter: (value, record) =>record.name.toString().includes(value),
    //@ts-ignore
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
          setTimeout(() => {
            searchInput.value.focus();
          }, 100);
        }
    },
  },
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '就诊时间',
    dataIndex: 'hospitalTime',
    key: 'hospitalTime',
    //@ts-ignore
    sorter: (a, b) => {return a.hospitalTime>b.hospitalTime? 1:-1},
    sortDirections: ['descend', 'ascend'],
  },
];
//@ts-ignore  将0转化为未处理
const convertTags = (num) =>{
  const str: string = num === 1 ? '已处理' : '未处理';
  return str;
}
//@ts-ignore  将时间戳转化为可视的时间
const timeDisplay = (timestamp) =>{
  const date = new Date(timestamp);
  return date.toLocaleString();
}

//检查部位：：自动填充
interface Option {
  value: string;
}
const filterOption = (input: string, option: Option) => {
  return option.value.indexOf(input) >= 0;
};

//树-辅助影像所见信息
const value = ref<string>();
const fromImage = ref<TreeSelectProps['treeData']>([
  {
    title:'胸部X线',
    value:'胸部X线',
    children:[
      {title:'=>胸廓：对称、畸形、骨骼情况', value:'胸廓：对称、畸形、骨骼情况'},
      {title:'=>肺野：肺内血管纹理，肺内有无病灶（如发现病灶要描述其部位、形态、边缘、大小、有无空洞等等情况）', value:'肺野：肺内血管纹理，肺内有无病灶（如发现病灶要描述其部位、形态、边缘、大小、有无空洞等等情况）'},
      {title:'=>肺门：正常、增大，有无肿块等', value:'肺门：正常、增大，有无肿块等'},
      {title:'=>纵隔：气管是否正中，纵隔有无增定及有无肿块发现等', value:'纵隔：气管是否正中，纵隔有无增定及有无肿块发现等'},
      {title:'=>横隔：位置、形态有无改变，肋隔角与心膈角情况', value:'横隔：位置、形态有无改变，肋隔角与心膈角情况'},
      {title:'=>心脏：外形有无异常变化，心胸比率，各房室情况', value:'心脏：外形有无异常变化，心胸比率，各房室情况'},
    ],
  },
  {
    title:'心脏平片X线',
    value:'心脏平片X线',
    children:[
      {title:'=>摄片位置：后前位、右前斜位、左前斜位，左侧位', value:'摄片位置：后前位、右前斜位、左前斜位，左侧位'},
      {title:'=>肺部：肺门、肺内动、静脉血管纹理的变化，有无肺动脉高压或肺淤血等表现', value:'肺部：肺门、肺内动、静脉血管纹理的变化，有无肺动脉高压或肺淤血等表现'},
      {title:'=>心脏：心外形增大的类型，肺动脉段外形变化，各房室增大的情况，食道左房压迹变化情况', value:'心脏：心外形增大的类型，肺动脉段外形变化，各房室增大的情况，食道左房压迹变化情况'},
    ],
  },
  {
    title:'泌尿系统X线',
    value:'泌尿系统X线',
    children:[
      {title:'=>两肾轮廓、位置、形态与大小',value:'两肾轮廓、位置、形态与大小'},
      {title:'=>全尿路区域有无钙化或结石样阴影',value:'全尿路区域有无钙化或结石样阴影'},
      {title:'=>腰大肌及腹壁脂肪线影像情况',value:'腰大肌及腹壁脂肪线影像情况'},
      {title:'=>脊椎、骨盆区、骨骼有无异常',value:'脊椎、骨盆区、骨骼有无异常'},
      {title:'=>肠道内容情况及其他腹部异常阴影',value:'肠道内容情况及其他腹部异常阴影'},
      {title:'造影',value:'造影',
        children:[
          {title:'=>造影剂名称、剂量',value:'造影剂名称、剂量'},
          {title:'=>两肾功能显影情况：正常、延迟、不显影',value:'两肾功能显影情况：正常、延迟、不显影'},
          {title:'=>两侧肾盏、肾孟轮廓显示情况',value:'两侧肾盏、肾孟轮廓显示情况'},
          {title:'=>膀胱充盈的轮廓、形态、大小',value:'膀胱充盈的轮廓、形态、大小'},
        ],
      },
    ]
  },
  {
    title:'头颅、五官X线',
    value:'头颅、五官X线',
    children:[
      {title:'=>头颅大小、形态及软组织情况',value:'头颅大小、形态及软组织情况'},
      {title:'=>眼眶窝大小、形态、骨质结构和软组织情况',value:'眼眶窝大小、形态、骨质结构和软组织情况'},
    ]
  },
  {
    title:'骨与关节X线',
    value:'骨与关节X线',
    children:[
      {title:'=>骨折或关节脱位部位与名称',value:'骨折或关节脱位部位与名称'},
      {title:'=>骨折断端或脱位关节有无骨质破坏，或其它骨质改变',value:'骨折断端或脱位关节有无骨质破坏，或其它骨质改变'},
      {title:'=>软组织有无积气、异物或肿胀情况',value:'软组织有无积气、异物或肿胀情况'},
      {title:'=>脊柱曲度变化情况',value:'脊柱曲度变化情况'},
      {title:'=>病椎的部位，数目与基本病理变化情况',value:'病椎的部位，数目与基本病理变化情况'},
    ]
  },
  {
    title:'消化道造影X 线',
    value:'消化道造影X 线',
    children:[
      {title:'=>食道内有无异常',value:'食道内有无异常'},
      {title:'=>食道钡剂通过各段充盈情况，有无受阻缺损或狭窄',value:'食道钡剂通过各段充盈情况，有无受阻缺损或狭窄'},
      {title:'=>食道壁柔软度、扩张度、粘膜情况',value:'食道壁柔软度、扩张度、粘膜情况'},
      {title:'=>经过贲门钡流情况，有无受阻，局部有无肿块，有无受压、移位情况',value:'经过贲门钡流情况，有无受阻，局部有无肿块，有无受压、移位情况'},
    ]
  },
  {
    title:'颅脑与五官CT或MRI',
    value:'颅脑与五官CT或MRI',
    children:[
      {title:'=>颅骨骨质情况',value:'颅骨骨质情况'},
      {title:'=>脑沟、脑池、脑回、脑灰质和脑白质情况',value:'脑沟、脑池、脑回、脑灰质和脑白质情况'},
      {title:'=>脑室大小、形态，位置与移位情况',value:'脑室大小、形态，位置与移位情况'},
      {title:'=>病灶发生部位、外形、累计范围',value:'病灶发生部位、外形、累计范围'},
      {title:'=>耳道情况',value:'耳道情况'},
    ]
  },
  {
    title:'腹部CT或MRI',
    value:'腹部CT或MRI',
    children:[
      {title:'=>胰腺包括钩突、头、体、尾部大小、形态情况',value:'胰腺包括钩突、头、体、尾部大小、形态情况'},
      {title:'=>肝门结构、肝内胆管与总胆管、肝内动静脉主干与分支',value:'肝门结构、肝内胆管与总胆管、肝内动静脉主干与分支'},
      {title:'=>脾脏大小、形态、密度或信号均匀度如何等情况',value:'脾脏大小、形态、密度或信号均匀度如何等情况'},
    ]
  },
]);
//@ts-ignore
const selectTree = (value) =>{
  diagnoseForm.imageInfo=diagnoseForm.imageInfo + value
};

export default defineComponent({
  components:{
    SearchOutlined,
  },
  setup() {
    onMounted(() => {
      patientData()
    })
    const visibleModal = ref<boolean>(false);
    const showModal = () => {
      visibleModal.value = true;
    };
    const visibleInfect = ref<boolean>(false);
    const showDrawerInfect = () => {
      visibleInfect.value = true;
    }
    const visibleHazard = ref<boolean>(false);
    const showDrawerHazard = () => {
      visibleHazard.value = true;
    }
    
    //提交时 校验诊断信息
    const infectKey: string[] = ["肺结核","肺炎","流行性乙型脑炎","脊髓灰质炎","百日咳"]
    function infectCheck(input: string): boolean{
      return infectKey.some((keyword) => input.includes(keyword));
    };
    const hazardKey: string[] = [
      "颅内血肿","颅内挫裂伤","蛛网膜下腔出血","颅骨骨折","颌面部骨折","脑疝","脑积水","脑梗死","脊柱骨折","脊柱畸形","气管异物",
      "支气管异物","张力性气胸","肺栓塞","肺梗死","食道异物","消化道穿孔","急性肠梗阻","脏器破裂","脏器出血","心肌坏死"
    ];
    function hazardCheck(input: string): boolean{
      return hazardKey.some((keyword) => input.includes(keyword));
    };
    const handleSubmit = async () => {
      if(diagnoseForm.diseaseName=="" || diagnoseForm.checkIntro=="" || diagnoseForm.imageInfo=="" || diagnoseForm.diagnose==""){
        message.warning('请完整填写报告相关信息！');
      }
      else if( infectCheck(diagnoseForm.diseaseName)==true || infectCheck(diagnoseForm.diagnose)==true ){
        message.info('检测到诊断疾病为传染病，请填写传染病报告卡！');
        showDrawerInfect();
      }
      else if( hazardCheck(diagnoseForm.diseaseName)==true || hazardCheck(diagnoseForm.diagnose)==true ){
        message.info('检测到诊断报告中存在危急值，请填写危急值报告！');
        showDrawerHazard();
      }
      else{
        diagnoseForm.userId=state.patientId; diagnoseForm.doctorId=userobj.id
        console.log(diagnoseForm)
        const response = await userService.submitReport(diagnoseForm)
        if(response.data.code==200){
          message.success(response.data.msg)
          diagnoseForm.diseaseName=''; diagnoseForm.checkIntro=''; diagnoseForm.imageType='';
          diagnoseForm.imageInfo=''; diagnoseForm.diagnose='';
          visibleModal.value = false
          location.reload()
        }
        else{
          message.error(response.data.msg)
        }
      }
    };
    //提交传染病信息
    const infectSubmit = async () => {
      if(infectForm.disease_name=="" || infectForm.classify=="" || infectForm.onset=="" || infectForm.diagnose_time==""){
        message.warning('请完整填写报告相关信息！');
      }
      else{
        infectForm.user_id=state.patientId
        infectForm.doctor_id=userobj.id
        console.log(infectForm)
        const response = await userService.createInfectious(infectForm)
        if(response.data.code==200){
          message.success(response.data.msg)
          infectForm.disease_name=''; infectForm.classify=''; infectForm.onset=null
          infectForm.diagnose_time=null; infectForm.info=''
          console.log('clear:',infectForm)
        }
        else{
          message.error(response.data.msg)
        }
      }
    };
    //提交危急值信息
    const hazardSubmit = async () => {
      if(hazardForm.hazard=="" || hazardForm.info==""){
        message.warning('请完整填写报告相关信息！');
      }
      else{
        hazardForm.userId=state.patientId
        hazardForm.doctorId=userobj.id
        const response = await userService.submitHazard(hazardForm)
        if(response.data.code==200){
          message.success(response.data.msg)
          hazardForm.hazard=''; hazardForm.info=''
        }
        else{
          message.error(response.data.msg)
        }
      }
    };

    //@ts-ignore  用以储存选择患者的信息
    const selectPatient = (record, dataIndex) =>{
      console.log(record);
      state.patientId = record.userId; 
      state.patientName = record.name;
      state.patientGender = record.gender;
      state.patientAge = record.age;
    };

    return {
      locale:zhCN,
      state,
      columns,
      ...toRefs(search), handleSearch, handleReset, searchInput,
      visibleModal, showModal, visibleInfect, visibleHazard,
      userobj,
      convertTags, timeDisplay,
      selectPatient,
      patientImage,
      filterOption,
      bodyPart: ref<Option[]>([
        { value: '头部' }, { value: '颈部' }, { value: '胸部' }, { value: '腹部' },
        { value: '上肢' }, { value: '下肢' }, { value: '脊柱' }, { value: '盆腔' },
      ]),
      MI_Disease: ref<Option[]>([
        { value: '肺结核' }, { value: '支气管扩张' }, { value: '肺炎' }, { value: '肺癌' },
        { value: '冠心病' }, { value: '肺动脉栓塞' }, { value: '主动脉夹层' },
        { value: '脑挫裂伤' }, { value: '脑内血肿' }, { value: '脑出血' }, { value: '脑梗死' },
        { value: '肠梗阻' }, { value: '胃肠道穿孔' }, { value: '食管癌' }, { value: '食管静脉曲张' },
        { value: '胃十二指肠溃疡' }, { value: '胃癌' }, { value: '肝囊肿' }, { value: '肝血管瘤' },
        { value: '肝癌' }, { value: '肝硬化/脂肪肝' }
      ]),
      caseClassify,
      fromImage, value, searchValue:ref(''), selectTree,
      handleSubmit, infectSubmit, hazardSubmit,
      diagnoseForm, infectForm, hazardForm
    };
  }
});
</script>

<template>
  <a-config-provider :locale="locale">
    <a-table class="table" :dataSource="state.data" :columns="columns" :pagination="false" :scroll="{ y: 320 }" >
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.key === 'tag'">
          <span>
            <a-tag
            :color="convertTags(record.tag) === '未处理' ? 'volcano' : 'green'"
            @click="selectPatient(record, 'name'); showModal(); patientImage();" style="cursor: pointer"
            >
            {{ convertTags(record.tag) }}
            </a-tag>
          </span>
        </template>
        <template v-else-if="column.key === 'hospitalTime'">
          {{ timeDisplay(record.hospitalTime) }}
        </template>

        <span v-if="searchText && searchColumn === column.dataIndex">
          <template
            v-for="(fragment, i) in text
              .toString()
              .split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
          >
            <mark
              v-if="fragment.toLowerCase() === searchText.toLowerCase()"
              :key="i"
              class="highlight"
            >
              {{ fragment }}
            </mark>
            <template v-else>{{ fragment }}</template>
          </template>
        </span>
      </template>

      <template
        #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
      >
        <div style="padding: 8px">
          <a-input
            ref="searchInput"
            :placeholder="`输入${column.title}`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block"
            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
            @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
          />
          <a-button
            type="primary"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="handleSearch(selectedKeys, confirm, column.dataIndex)"
          >
            <template #icon><SearchOutlined /></template>
            查询
          </a-button>
          <a-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
            清空
          </a-button>
        </div>
      </template>
      <template #customFilterIcon="{ filtered }">
        <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
      </template>
    </a-table>
  </a-config-provider>

  <div>
    <a-modal
      v-model:visible="visibleModal"
      title="诊断报告"
      width="100%"
      wrap-class-name="full-modal"
    >
      <template #footer>
        <a-button html-type="submit" type="primary" @click="handleSubmit">
          提交
        </a-button>
      </template>
      <a-descriptions class="infoDescription">
        <a-descriptions-item label="患者号" :span="-100" >{{state.patientId}}</a-descriptions-item>
        <a-descriptions-item label="患者姓名" :span="-100">{{state.patientName}}</a-descriptions-item>
        <a-descriptions-item label="性别" :span="-100">{{state.patientGender}}</a-descriptions-item>
        <a-descriptions-item label="年龄" :span="-100">{{state.patientAge}}</a-descriptions-item>
      </a-descriptions>
      
      <a-card title="患者影像" style="width: 260px;">
        <a-image-preview-group>
          <div v-for="(item, index) in state.imageData" :key="index">
            <a-image :width="200" :src=item.image />
          </div>
        </a-image-preview-group>
      </a-card>

      <a-from
        class="diagnoseForm"
        :model="diagnoseForm"
        name="diagnoseForm"
        :label-col="{ span: 8}"
        :wrapper-col="{ span: 16}"
      >
        <a-form-item label="疾病名称" name="diseaseName" style="position: relative; top:15px; left: 10px;">
          <a-auto-complete
            v-model:value="diagnoseForm.diseaseName"
            :options="MI_Disease"
            :filter-option="filterOption"
            style="width: 300px;"
          >
            <a-input v-model:value="diagnoseForm.diseaseName" style="width:300px" />
          </a-auto-complete>
        </a-form-item>
        <a-form-item label="检查部位" name="checkIntro" style="position: relative; top: 5px; left: 10px;">
          <a-auto-complete
            v-model:value="diagnoseForm.checkIntro"
            :options="bodyPart"
            :filter-option="filterOption"
            style="width: 300px;"
          >
            <a-input v-model:value="diagnoseForm.checkIntro" style="width: 300px;"/>
          </a-auto-complete>
        </a-form-item>
        <a-form-item label="影像所见信息" name="imageInfo" style="position: relative; top: -3px; left: 10px;">
          <a-textarea v-model:value="diagnoseForm.imageInfo" style="position:relative; left: 10px; width: 505px; height: 100px;"/>
        </a-form-item>
        <a-form-item label="影像学诊断" name="diagnose" style="position: relative; top: -20px; left: 10px;">
          <a-textarea v-model:value="diagnoseForm.diagnose" style="position:relative; left: 10px; width: 505px; height: 100px;"/>
        </a-form-item>
      </a-from>

      <a-tree-select
        v-model:value="value"
        v-model:searchValue="searchValue"
        show-search
        :dropdown-style="{ maxHeight: '800px', overflow: 'auto' }"
        placeholder="诊疗知识库"
        allow-clear
        :tree-data="fromImage"
        style="position: absolute; top: 126px; width: 480px; left: 300px;"
        @select="selectTree"
      >
        <template #title="{value: val, title}">
          <template
            v-for="(fragment, i) in title
              .toString()
              .split(new RegExp(`(?<=${searchValue})|(?=${searchValue})`, 'i'))"
          >
            <span
              v-if="fragment.toLowerCase()===searchValue.toLowerCase()"
              :key="i"
              style="color: #08c;"
            >
              {{ fragment }}
            </span>
            <template v-else>{{ fragment }}</template>
          </template>
        </template>
      </a-tree-select>
    </a-modal>
  </div>

  <a-drawer
    v-model:visible="visibleInfect"
    class="drawerInfect"
    title="传染病报告"
    placement="left"
  >
    <a-from
      class="infectForm"
      :model="infectForm"
      name="infectForm"
      :label-col="{ span: 8}"
      :wrapper-col="{ span: 16}"
    >
      <a-form-item label="传染病名称" name="diseaseName" style="">
        <a-input v-model:value="infectForm.disease_name" style="width:200px;"/>
      </a-form-item>
      <a-form-item label="病例分类" name="classify" style="">
        <a-select v-model:value="infectForm.classify" style="position: relative; left: 14px; width: 200px;" :options="caseClassify"/>
      </a-form-item>
      <a-form-item label="发病时间" name="onset" style="">
        <a-date-picker v-model:value="infectForm.onset" style="position: relative; left: 14px;" value-format="YYYY-MM-DD"/>
      </a-form-item>
      <a-form-item label="诊断时间" name="diagnoseTime" style="">
        <a-date-picker v-model:value="infectForm.diagnose_time" style="position: relative; left: 14px;" value-format="YYYY-MM-DD"/>
      </a-form-item>
      <a-form-item label="备注" name="info" style="">
        <a-textarea v-model:value="infectForm.info" style="position: relative; left: 40px; width: 250px;"/>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" style="position: relative; left: 268px;" @click="infectSubmit">提交</a-button>
      </a-form-item>
    </a-from>
  </a-drawer>

  <a-drawer
    v-model:visible="visibleHazard"
    class="drawerHazard"
    title="危急值报告"
    placement="left"
  >
  <a-from
      class="hazardForm"
      :model="hazardForm"
      name="hazardForm"
      :label-col="{ span: 8}"
      :wrapper-col="{ span: 16}"
    >
      <a-form-item label="危急值信息" name="hazard" style="">
        <a-textarea v-model:value="hazardForm.hazard" style="position: relative; left: 0px; width: 300px; height: 100px;"/>
      </a-form-item>
      <a-form-item label="备注" name="info" style="">
        <a-textarea v-model:value="hazardForm.info" style="position: relative; left: 0px; width: 300px; height: 100px;"/>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" style="position: relative; left: 238px;" @click="hazardSubmit">提交</a-button>
      </a-form-item>
    </a-from>
  </a-drawer>

</template>
  
<style lang="less">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-header {
    padding: 16px 24px;
    color: rgba(0, 0, 0, 0.85);
    background: #fff;
    border-bottom: 5px double rgba(0, 0, 0, 0.85);
    border-radius: 2px 2px 0 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
  }
}

.infoDescription{
  border-bottom: 2px dotted black;
  position: relative;
  top: -10px;
}
.ant-descriptions-item-label {
    color: rgba(0, 0, 0, 0.85);
    font-weight: bold;
    font-size: 15px;
    font-family: system-ui;
    line-height: 1.5715;
    text-align: start;
}
.ant-descriptions-item-content{
  font-size: 15px;
  font-family: system-ui;
}
.table{
  position: absolute;
  top: 20%;
  width: 80%;
}
.ant-card{
  height: 420px;
  overflow-y: auto;
  border: 2px solid darkgray;
  border-radius: 5px;
}
.ant-modal-footer{
  height: 50px;
  border-top: 5px double rgba(0, 0, 0, 0.85);
}
.diagnoseForm{
  position: absolute;
  top: 126px;
  border: 2px solid darkgray;
  border-radius: 5px;
  right: 21px;
  height: 420px;
  width: 550px;
}
.treeSelect{
  position: absolute;
  top: 126px;
  width: 480px;
  left: 300px;
}
</style>